<template>
  <div class="withdraw-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <h1 class="header-title">提现</h1>
      <div class="record-link" @click="goToTransactions">
        提现记录 <van-icon name="arrow" />
      </div>
    </div>
    
    <!-- 币种选择 -->
    <div class="currency-section">
      <h2 class="section-title">选择币种</h2>
      <div class="currency-list">
        <div 
          v-for="item in currencies" 
          :key="item.name"
          :class="['currency-item', selectedCurrency === item.name ? 'selected' : '']"
          @click="selectCurrency(item)"
        >
          <div class="currency-icon" :style="{ backgroundColor: getCurrencyColor(item.name) }">
            {{ item.name.substring(0, 3) }}
          </div>
          <div class="currency-info">
            <span class="currency-name">{{ item.name }}</span>
          </div>
          <van-icon name="success" v-if="selectedCurrency === item.name" class="selected-icon" />
        </div>
        
        <!-- 当没有可用币种时显示提示 -->
        <div v-if="currencies.length === 0" class="no-currencies-tip">
          <van-empty description="暂无可提现币种" />
        </div>
      </div>
    </div>
    
    <!-- 网络选择 -->
    <div class="network-section" v-if="currentChains.length > 0">
      <h2 class="section-title">选择网络</h2>
      <div class="network-list">
        <div 
          v-for="chain in currentChains" 
          :key="chain.id"
          :class="['network-item', selectedChainId === chain.id ? 'selected' : '']"
          @click="selectChain(chain)"
        >
          <div class="network-icon">
            <van-image
              width="24"
              height="24"
              :src="chain.icon"
              fit="contain"
              :alt="chain.name"
            >
              <template #error>
                <div class="network-icon-fallback">{{ chain.name.substring(0, 2) }}</div>
              </template>
            </van-image>
          </div>
          <div class="network-info">
            <span class="network-name">{{ chain.name }}</span>
          </div>
          <van-icon name="success" v-if="selectedChainId === chain.id" class="selected-icon" />
        </div>
      </div>
    </div>
    
    <!-- 提现地址 -->
    <div class="address-section">
      <h2 class="section-title">提现地址</h2>
      <div class="address-input">
        <van-field
          v-model="withdrawAddress"
          placeholder="请输入提现地址"
          class="address-field"
        />
        <van-button 
          size="small" 
          type="primary" 
          icon="scan" 
          plain 
          class="scan-button"
          @click="scanQrCode"
        >
          扫码
        </van-button>
      </div>
      
      <div class="saved-addresses">
        <van-loading v-if="addressesLoading" type="spinner" size="24px" vertical>加载中...</van-loading>
        <template v-else-if="savedAddresses.length > 0">
          <h3 class="subsection-title">常用地址</h3>
          <div class="address-tags">
            <div 
              v-for="(address, index) in savedAddresses" 
              :key="index"
              class="address-tag"
              @click="selectAddress(address)"
            >
              <span class="tag-name">{{ address.name }}</span>
              <span class="tag-address">{{ formatAddress(address.address) }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
    
    <!-- 提现金额 -->
    <div class="amount-section">
      <!-- <h2 class="section-title">提现金额</h2> -->
      
      <!-- 余额信息 -->
      <div class="balance-card">
        <div class="balance-header">
          <span class="balance-label">可用余额</span>
          <div class="amount-all" @click="setMaxAmount">全部提现</div>
        </div>
        <div class="balance-amount">{{ formatNumber(walletBalances[selectedCurrency] || '0.00') }} <span class="currency-unit">{{ selectedCurrency }}</span></div>
      </div>
      
      <!-- 输入框 -->
      <div class="amount-input-container">
        <div class="amount-prefix">{{ selectedCurrency }}</div>
        <van-field
          v-model="amount"
          type="digit"
          placeholder="请输入提现金额"
          class="amount-input"
          :formatter="formatter"
        />
      </div>
      
      <!-- 提现信息 -->
      <div class="withdraw-info">
        <div class="info-item">
          <div class="info-label">
            <van-icon name="info-o" class="info-icon" />
            <span>最小提现</span>
          </div>
          <div class="info-value">10 {{ selectedCurrency }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">
            <van-icon name="gold-coin-o" class="info-icon" />
            <span>手续费</span>
            <van-icon name="question-o" class="question-icon" @click="showFeeInfo" />
          </div>
          <div class="info-value">{{ calculateFee() }} {{ selectedCurrency }}</div>
        </div>
        
        <div class="info-item" v-if="amount">
          <div class="info-label">
            <van-icon name="balance-o" class="info-icon" />
            <span>实际到账</span>
          </div>
          <div class="info-value highlight">{{ calculateActualAmount() }} {{ selectedCurrency }}</div>
        </div>
      </div>
    </div>
    
    <!-- 交易密码 -->
    <!-- <div class="password-section">
      <h2 class="section-title">交易密码</h2>
      <div class="password-input">
        <van-field
          v-model="password"
          type="password"
          placeholder="请输入交易密码"
          :right-icon="showPassword ? 'eye-o' : 'closed-eye'"
          @click-right-icon="togglePasswordVisibility"
        />
      </div>
      <div class="password-action">
        <span @click="goToSetPassword">设置/修改交易密码</span>
      </div>
    </div> -->
    
    <!-- 提交按钮 -->
    <div class="submit-section">
      <van-button 
        type="primary" 
        block 
        :disabled="!isFormValid || submitting"
        :loading="submitting"
        @click="submitWithdraw"
      >
        确认提现
      </van-button>
      
      <div class="submit-note">
        <van-icon name="warning-o" class="warning-icon" />
        <div class="note-content">
          <p>提现申请提交后，系统将在1-24小时内处理。</p>
          <p>请确保提现地址正确，错误地址导致的资产损失将无法追回。</p>
        </div>
      </div>
    </div>
    
    
    <!-- 手续费说明弹窗 -->
    <van-dialog
      v-model:show="showFeeDialog"
      title="手续费说明"
      confirm-button-text="我知道了"
      :show-cancel-button="false"
    >
      <div class="fee-dialog-content">
        <p>提现手续费为提现金额的{{ feeRatio * 100 }}%，最低1 {{ selectedCurrency }}。</p>
        <p>例如：</p>
        <ul>
          <li>提现100 {{ selectedCurrency }}，手续费为1 {{ selectedCurrency }}</li>
          <li>提现1000 {{ selectedCurrency }}，手续费为10 {{ selectedCurrency }}</li>
        </ul>
        <p>手续费从提现金额中扣除，实际到账金额 = 提现金额 - 手续费。</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showDialog, showLoadingToast, closeToast } from 'vant'
import { getSupportedCurrencies, submitWithdraw as apiSubmitWithdraw } from '@/api/cash'
import {formatNumber} from '@/utils/utils'
import {getUserWallet} from '@/api/user'

const router = useRouter()
const route = useRoute()

// 状态变量
const loading = ref(false)
const addressesLoading = ref(false)
const submitting = ref(false)
const feeRatio = ref(0.01)
const balanceLoading = ref(false)

// 获取URL参数中的币种
const getInitialCurrency = () => {
  // 如果URL参数中的币种是HDFS，则返回空字符串，后续会自动选择第一个可用币种
  return route.query.currency === 'HDFS' ? '' : (route.query.currency || '')
}

const selectedCurrency = ref(getInitialCurrency())
const selectedChainId = ref(null)
const withdrawAddress = ref('')
const amount = ref('')
const password = ref('')
const showPassword = ref(false)
const showFeeDialog = ref(false)

// 币种列表
const currencies = ref([])
// 当前选中币种的链列表
const currentChains = ref([])
// 用户各币种余额
const walletBalances = ref({})

// 常用地址
const savedAddresses = ref([])

// 加载币种列表
const loadCurrencies = async () => {
  loading.value = true
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  })
  
  try {
    const res = await getSupportedCurrencies()
    if (res && res.code === 0 && res.data) {
      // 过滤掉HDFS币种，不支持提现
      currencies.value = res.data.filter(currency => currency.name !== 'HDFS')
      
      // 如果没有选择币种或选择的是HDFS，则自动选择第一个可用币种
      if ((selectedCurrency.value === '' || selectedCurrency.value === 'HDFS') && currencies.value.length > 0) {
        selectedCurrency.value = currencies.value[0].name
        updateCurrentChains(selectedCurrency.value)
        loadUserWalletBalance(selectedCurrency.value)
      }
    } else {
      showToast('获取币种列表失败')
    }
  } catch (error) {
    console.error('获取币种列表出错:', error)
    showToast('获取币种列表出错')
  } finally {
    loading.value = false
    closeToast()
  }
}

// 更新当前币种的链列表
const updateCurrentChains = (currencyName) => {
  const currency = currencies.value.find(c => c.name === currencyName)
  if (currency && currency.chains && Array.isArray(currency.chains)) {
    currentChains.value = currency.chains
    
    // 如果有链，默认选择第一个
    if (currentChains.value.length > 0) {
      selectChain(currentChains.value[0])
    } else {
      selectedChainId.value = null
    }
  } else {
    currentChains.value = []
    selectedChainId.value = null
  }
}


// 查询用户余额
const loadUserWalletBalance = async (currencyName) => {
  if (!currencyName) return
  
  balanceLoading.value = true
  
  try {
    const res = await getUserWallet({ icon: currencyName })
    if (res && res.code === 0 && res.data && res.data.length == 1) {
      // 更新余额
      walletBalances.value = {
        ...walletBalances.value,
        [currencyName]: res.data[0].balance || '0.00'
      }
    } else {
      console.error('获取余额失败:', res)
    }
  } catch (error) {
    console.error('获取余额出错:', error)
  } finally {
    balanceLoading.value = false
  }
}

// 选择币种
const selectCurrency = (currency) => {
  if (selectedCurrency.value === currency.name) return // 避免重复选择同一币种
  
  // 如果选择的是HDFS，显示提示并阻止选择
  if (currency.name === 'HDFS') {
    showToast('HDFS币种暂不支持提现')
    return
  }
  
  selectedCurrency.value = currency.name
  
  // 更新当前币种的链列表
  updateCurrentChains(currency.name)
  
  // 查询该币种的余额
  loadUserWalletBalance(currency.name)
}

// 选择链
const selectChain = (chain) => {
  if (selectedChainId.value === chain.id) return // 避免重复选择同一链
  
  selectedChainId.value = chain.id
}

// 获取币种颜色
const getCurrencyColor = (name) => {
  const colors = {
    'HDFS': '#10b981',
    'USDT': '#3b82f6',
    'BTC': '#f59e0b',
    'ETH': '#8b5cf6'
  }
  
  return colors[name] || '#64748b'
}

// 格式化输入金额
const formatter = (value) => {
  // 限制小数点后两位
  if (value.includes('.')) {
    const parts = value.split('.')
    if (parts[1].length > 2) {
      return `${parts[0]}.${parts[1].substring(0, 2)}`
    }
  }
  return value
}

// 计算手续费
const calculateFee = () => {
  if (!amount.value) return '0.00'
  
  const amountNum = parseFloat(amount.value)
  if (isNaN(amountNum)) return '0.00'
  
  const currency = currencies.value.find(c => c.name === selectedCurrency.value)
  if (!currency) return '0.00'
  
  const fee = amountNum * feeRatio.value
  // 最低手续费为1
  return Math.max(fee, 1).toFixed(2)
}

// 计算实际到账金额
const calculateActualAmount = () => {
  if (!amount.value) return '0.00'
  
  const amountNum = parseFloat(amount.value)
  if (isNaN(amountNum)) return '0.00'
  
  const feeNum = parseFloat(calculateFee())
  const actualAmount = Math.max(amountNum - feeNum, 0)
  
  return actualAmount.toFixed(2)
}

// 设置最大金额
const setMaxAmount = () => {
  const balance = walletBalances.value[selectedCurrency.value]
  if (balance) {
    // 移除逗号，转为数字
    const balanceNum = parseFloat(balance.toString().replace(/,/g, ''))
    amount.value = balanceNum.toString()
  }
}

// 显示手续费信息
const showFeeInfo = () => {
  showFeeDialog.value = true
}

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 扫描二维码
const scanQrCode = () => {
  showToast('调用扫码功能')
  // 实际项目中应该调用原生扫码功能
}

// 选择常用地址
const selectAddress = (address) => {
  withdrawAddress.value = address.address
}

// 格式化地址显示
const formatAddress = (address) => {
  if (!address) return ''
  return address.substring(0, 6) + '...' + address.substring(address.length - 4)
}

// 表单验证
const isFormValid = computed(() => {
  // 基本验证
  const basicValid = withdrawAddress.value && 
                    amount.value && 
                    parseFloat(amount.value) >= 10;
  
  // 如果有网络选项，必须选择一个网络
  if (currentChains.value.length > 0) {
    return basicValid && selectedChainId.value;
  }
  
  return basicValid;
})

// 提交提现
const submitWithdraw = () => {
  if (!isFormValid.value) {
    showToast('请完善表单信息')
    return
  }
  
  // 检查是否选择了网络
  if (currentChains.value.length > 0 && !selectedChainId.value) {
    showToast('请选择提现网络')
    return
  }
  
  // 获取选中的网络名称
  const selectedChain = currentChains.value.find(chain => chain.id === selectedChainId.value)
  const chainName = selectedChain ? selectedChain.name : ''
  
  showDialog({
    title: '确认提现',
    message: `您确定要通过${chainName}网络提现 ${amount.value} ${selectedCurrency.value} 到地址 ${formatAddress(withdrawAddress.value)} 吗？`,
    confirmButtonText: '确认提现',
    cancelButtonText: '取消'
  }).then(async () => {
    submitting.value = true
    showLoadingToast({
      message: '提交中...',
      forbidClick: true,
      duration: 0
    })
    
    try {
      const res = await apiSubmitWithdraw({
        icon: selectedCurrency.value,
        amount: amount.value,
        address: withdrawAddress.value,
        chainId: selectedChainId.value // 添加网络ID
      })
      
      if (res && res.code === 0) {
        showToast({
          type: 'success',
          message: '提现申请已提交',
          duration: 2000
        })
        
        // 重置表单
        amount.value = ''
        password.value = ''
      } else {
        showToast('error',res.message || '提现申请提交失败',1000)
      }
    } catch (error) {
      console.error('提交提现申请出错:', error)
      showToast('error','提交提现申请出错，请稍后重试',1000)
    } finally {
      submitting.value = false
      //closeToast()
    }
  })
}

// 获取状态文本
const getStatusText = (status) => {
  return {
    'completed': '已完成',
    'pending': '处理中',
    'failed': '失败'
  }[status]
}

// 获取状态样式类
const getStatusClass = (status) => {
  return {
    'completed': 'status-completed',
    'pending': 'status-pending',
    'failed': 'status-failed'
  }[status]
}

// 查看交易
const viewTransaction = (hash) => {
  // 实际项目中应该跳转到区块链浏览器
  window.open(`https://etherscan.io/tx/${hash}`, '_blank')
}

// 导航方法
const goBack = () => {
  router.back()
}

const goToTransactions = () => {
  router.push(`/transactions?currency=${selectedCurrency.value}&type=withdraw`)
}

const goToSetPassword = () => {
  router.push('/settings/transaction-password')
}

// 初始化
onMounted(() => {
  loadCurrencies()
  
  // 查询初始币种的余额
  const initialCurrency = getInitialCurrency()
  loadUserWalletBalance(initialCurrency)
  
  // 如果有初始币种但还没有加载币种列表，需要监听币种列表加载完成后更新网络
  if (initialCurrency && currencies.value.length === 0) {
    const checkCurrencies = setInterval(() => {
      if (currencies.value.length > 0) {
        clearInterval(checkCurrencies)
        const currency = currencies.value.find(c => c.name === initialCurrency)
        if (currency) {
          updateCurrentChains(initialCurrency)
        }
      }
    }, 100)
    
    // 设置超时，避免无限循环
    setTimeout(() => clearInterval(checkCurrencies), 5000)
  }
})
</script>

<style scoped>
.withdraw-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding-bottom: 24px;
  max-width: 800px;
  margin: 0 auto;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: none;
  padding: 0;
}

.header-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
}

/* 币种选择 */
/* 币种选择 */
.currency-section {
  background-color: #ffffff;
  padding: 16px;
  margin: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 0;
}

.record-link {
  font-size: 14px;
  color: #3b82f6;
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}

.record-link .van-icon {
  font-size: 12px;
  margin-left: 2px;
}

.currency-list {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 8px;
}

.currency-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f8fafc;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
  position: relative;
}

.currency-item:active {
  background-color: #f1f5f9;
}

.currency-item.selected {
  background-color: #eff6ff;
  border: 1px solid #3b82f6;
}

.currency-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.currency-info {
  text-align: center;
}

.currency-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
}

.currency-balance {
  font-size: 12px;
  color: #64748b;
}

.selected-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #3b82f6;
  font-size: 16px;
  background-color: white;
  border-radius: 50%;
}

/* 网络选择 */
.network-section {
  background-color: #ffffff;
  padding: 16px;
  margin: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.network-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.network-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f8fafc;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.network-item:active {
  background-color: #f1f5f9;
}

.network-item.selected {
  background-color: #eff6ff;
  border: 1px solid #3b82f6;
}

.network-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  background-color: #e2e8f0;
  overflow: hidden;
}

.network-icon-fallback {
  font-size: 14px;
  font-weight: bold;
  color: #64748b;
}

.network-info {
  flex: 1;
}

.network-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

/* 提现地址 */
.address-section {
  background-color: #ffffff;
  padding: 16px;
  margin: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.address-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.address-field {
  flex: 1;
  background-color: #f8fafc;
  border-radius: 8px;
}

.scan-button {
  color: #3b82f6;
  border-color: #3b82f6;
}

.saved-addresses {
  margin-top: 12px;
}

.subsection-title {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 8px;
}

.address-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.address-tag {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background-color: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.address-tag:active {
  background-color: #f1f5f9;
}

.tag-name {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.tag-address {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

/* 提现金额 */
.amount-section {
  background-color: #ffffff;
  padding: 16px;
  margin: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 余额卡片 */
.balance-card {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 12px;
  padding: 16px;
  color: white;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.balance-label {
  font-size: 14px;
  opacity: 0.9;
}

.amount-all {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 13px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.amount-all:active {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0.98);
}

.balance-amount {
  font-size: 24px;
  font-weight: 700;
}

.currency-unit {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.9;
}

/* 输入框 */
.amount-input-container {
  display: flex;
  align-items: center;
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 6px 16px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s;
}

.amount-input-container:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.amount-prefix {
  font-size: 18px;
  font-weight: 600;
  color: #334155;
  margin-right: 10px;
}

.amount-input {
  flex: 1;
  background-color: transparent;
}

.amount-input :deep(.van-field__control) {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}

/* 提现信息 */
.withdraw-info {
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e2e8f0;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #64748b;
}

.info-icon {
  margin-right: 6px;
  color: #3b82f6;
}

.question-icon {
  margin-left: 4px;
  color: #64748b;
  cursor: pointer;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.info-value.highlight {
  color: #10b981;
  font-weight: 600;
  font-size: 16px;
}

/* 交易密码 */
.password-section {
  background-color: #ffffff;
  padding: 16px;
  margin: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.password-input {
  margin-bottom: 8px;
}

.password-input :deep(.van-field) {
  background-color: #f8fafc;
  border-radius: 8px;
}

.password-action {
  text-align: right;
  font-size: 14px;
  color: #3b82f6;
  cursor: pointer;
}

/* 提交按钮 */
.submit-section {
  padding: 16px;
  margin: 12px;
}

.submit-note {
  display: flex;
  padding: 12px;
  background-color: #fffbeb;
  border-radius: 8px;
  border: 1px solid #fef3c7;
  margin-top: 16px;
}

.warning-icon {
  color: #f59e0b;
  font-size: 18px;
  margin-right: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}

.note-content {
  font-size: 14px;
  color: #92400e;
}

.note-content p {
  margin: 0 0 6px;
}

.note-content p:last-child {
  margin-bottom: 0;
}


/* 手续费弹窗 */
.fee-dialog-content {
  padding: 16px;
  font-size: 14px;
  color: #334155;
}

.fee-dialog-content p {
  margin: 0 0 8px;
}

.fee-dialog-content ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.fee-dialog-content li {
  margin-bottom: 4px;
}
</style>